/* 初始化样式------------------------------- */
/* 栅格布局（媒体查询变量）
* $us ≥376px  响应式栅格
* $xs ≥576px  响应式栅格
* $sm ≥768px  响应式栅格
* $md ≥992px  响应式栅格
* $lg ≥1200px 响应式栅格
* $xl ≥1920px 响应式栅格
------------------------------- */
$us: 376px;
$xs: 576px;
$sm: 768px;
$md: 992px;
$lg: 1200px;
$xl: 1920px;

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none !important;
}
:root {
	--self-header-bg: #ffffff;
	--self-header-color: #333639;
	--self-header-height: 56px;
	--self-header-z-index: 97;
	--self-tags-height: 44px;
	--self-tags-z-index: 95;
	--self-aside-bg: #ffffff;
	--self-aside-color: #333639;
	--self-aside-width: 220px;
	--self-aside-collapsed-width: 64px;
	--self-aside-z-index: 99;
	--self-footer-bg: #ffffff;
	--self-footer-color: #333639;
	--self-footer-height: 48px;
	--self-footer-z-index: 95;
	--self-main-bg: #f6f9f8;
	--header-box-shadow: 0 1px 2px rgb(0, 21, 41, 0.08);
	--aside-box-shadow: 2px 0 8px 0 rgb(29, 35, 41, 0.05);
	--tags-box-shadow: 0 1px 2px rgb(0, 21, 41, 0.08);
	--un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0);
	--un-ring-shadow: 0 0 rgb(0 0 0 / 0);
}
.w-1 {
	width: 1px !important;
}
.bg {
	&-main {
		background-color: var(--self-main-bg);
	}
}
.el-menu-item:hover,
.el-sub-menu__title:hover,
.hover-primary:hover {
	color: var(--el-color-primary) !important;
	background-color: var(--el-color-primary-light-9) !important;
}
html,
body,
#app {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family:
		v-sans,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol';
	font-size: 14px;
	line-height: inherit;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}
.layout-header-search {
	.el-dialog {
		background-color: unset;
		width: 560px;
	}
	.el-tooltip__trigger {
		width: 100%;
	}
	.el-dialog__header,
	.el-dialog__body {
		display: none;
	}
	.el-dialog__footer {
		padding: 0;
	}
}
.layout-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	flex-basis: auto;
	box-sizing: border-box;
	min-width: 0;
}
.layout-header {
	padding: 0 !important;
	background-color: var(--self-header-bg);
	color: var(--self-header-color);
	z-index: var(--self-header-z-index);
	.header-btn {
		padding: 0 10px;
		display: inline-flex;
		align-items: center;
		cursor: pointer;
	}
	.el-icon {
		vertical-align: middle;
		width: var(--el-menu-icon-width);
		text-align: center;
		font-size: 18px;
	}
	.layout-header-user {
		display: flex;
		align-items: center;
		white-space: nowrap;
		color: var(--self-header-color);
	}
	.layout-header-avatar {
		width: 25px;
		height: 25px;
		border-radius: 100%;
		margin-right: 5px;
	}
	.el-menu {
		border-bottom: 0;
	}
}
.layout-header,
.layout-header_placement {
	height: var(--self-header-height) !important;
}
.layout-tags {
	top: var(--self-header-height);
	z-index: var(--self-tags-z-index);
	.list-tags {
		position: relative;
		margin-right: -18px;
		display: inline-flex;
		cursor: pointer;
		align-items: center;
		justify-content: center;
		grid-gap: 8px;
		gap: 8px;
		white-space: nowrap;
		padding: 8px 26px;
		.tags-bg {
			display: none;
		}
	}
	.tags-style-one {
		.list-tags {
			.tags-bg {
				pointer-events: none;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
				height: 100%;
				width: 100%;
				color: transparent;
			}
			.tags-close-icon {
				&:hover {
					color: #fff;
					background-color: #9ca3af;
					border-radius: 100%;
				}
			}
			&:hover {
				.tags-bg {
					color: #eeeeee;
					display: block;
					z-index: -2;
				}
			}
		}
		.list-tags.active-tags {
			color: var(--el-color-primary);
			.tags-bg {
				color: var(--el-color-primary-light-9);
				display: block;
			}
			.tags-close-icon {
				&:hover {
					color: #fff;
					background-color: var(--el-color-primary);
					border-radius: 100%;
				}
			}
		}
	}
	.tags-style-two {
		.list-tags {
			&:hover {
				color: var(--el-color-primary);
			}
		}
		.list-tags.active-tags {
			color: var(--el-color-primary);
		}
	}
	.tags-style-three {
		.list-tags {
			margin-right: 18px;
			padding: 5px 15px;
			border: 1px solid #e5e7eb;
			border-radius: 4px;
			&:hover {
				color: var(--el-color-primary);
				border: 1px solid var(--el-color-primary);
			}
		}
		.list-tags.active-tags {
			color: var(--el-color-primary);
			border: 1px solid var(--el-color-primary);
			background-color: var(--el-color-primary-light-9);
		}
	}
}
.layout-tags,
.layout-tags_placement {
	height: var(--self-tags-height) !important;
}
.layout-aside {
	width: var(--self-aside-width) !important;
	z-index: var(--self-aside-z-index);
}
.layout-aside_collapsed {
	width: var(--self-aside-collapsed-width) !important;
	z-index: var(--self-aside-z-index);
}
.layout-aside,
.layout-aside_collapsed {
	flex-shrink: 0;
	overflow: unset !important;
	box-sizing: unset !important;
	background-color: var(--self-aside-bg);
	color: var(--self-aside-color);
	.el-menu {
		border-right: 0;
	}
}
.layout-footer {
	background-color: var(--self-footer-bg);
	color: var(--self-footer-color);
	z-index: var(--self-footer-z-index);
}
.layout-footer,
.layout-footer_placement {
	height: var(--self-footer-height) !important;
}
.left-gap {
	padding-left: var(--self-aside-width) !important;
}
.left-gap_collapsed {
	padding-left: var(--self-aside-collapsed-width) !important;
}
.aside-padding-top {
	padding-top: var(--self-header-height) !important;
}
.aside-padding-bottom {
	padding-bottom: var(--self-footer-height) !important;
}
.shadow-header {
	--un-shadow: var(--header-box-shadow);
	box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
}
.shadow-tags {
	--un-shadow: var(--tags-box-shadow);
	box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
}
.shadow-aside {
	--un-shadow: var(--aside-box-shadow);
	box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
}
.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 0.15s;
}
.transition-all-300 {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 0.3s;
}
.scrollbar {
	&::-webkit-scrollbar {
		width: 6px;
		height: 6px;
		background-color: var(--self-main-bg);
	}
	&::-webkit-scrollbar-thumb {
		background-color: #cccccc;
		border-radius: 4px;
	}
}
.vertical-mix-menu .mix-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 4px 6px 4px;
	padding: 8px 4px;
	border-radius: 8px;
	background-color: transparent;
	cursor: pointer;
	span {
		display: inline-block;
		font-size: 12px;
		text-align: center;
		padding-top: 4px;
		height: 24px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	&:hover {
		background-color: rgb(0 0 0 / 0.08);
	}
}
.mix-menu {
	width: var(--self-aside-collapsed-width);
}
.vertical-mix-menu .mix-item.mix-color-active {
	color: var(--el-color-primary) !important;
}
.vertical-mix-menu .mix-item.mix-bg-active {
	background-color: var(--el-color-primary-light-9) !important;
}
/* nprogress 进度条跟随主题颜色
------------------------------- */
#nprogress {
	.bar {
		background: var(--el-color-primary) !important;
		z-index: 9999999 !important;
	}
}
